<template>
  <div id="notes-list" class="custom-table" v-loading="isLoading">
    <div v-if="!notes.length" class="easy-container no-data">{{ isLoading ? '' : '没有消息' }}</div>
    <template v-for="note in notes">
      <div v-if="note.err" :key="note.id" class="easy-container no-data"
          :title="`id:${note.id} - ${note.msg}`">因系统升级，该消息无法正常显示</div>
      <template v-else>
        <CommentsAndVotesNoteItem
          v-if="note.type === noteT.comments || note.type === noteT.votes || note.type === noteT.at"
          :key="note.id"
          :note="note"
        />
        <CtrbNoteItem v-if="note.type === noteT.ctrb" :key="note.id" :note="note" />
        <OtherNoteItem v-if="note.type === noteT.other" :key="note.id" :note="note" />
        <annc-note-item v-if="note.type === noteT.annc" :key="note.id" :note="note" />
      </template>
    </template>
  </div>
</template>

<script>
import CommentsAndVotesNoteItem from './list_items/CommentsAndVotes';
import CtrbNoteItem from './list_items/Ctrb';
import OtherNoteItem from './list_items/Other';
import AnncNoteItem from './list_items/Annc';

export default {
  name: 'NotesList', // 消息列表
  components: {
    CommentsAndVotesNoteItem,
    CtrbNoteItem,
    OtherNoteItem,
    AnncNoteItem,
  },
  props: {
    notes: { // 消息列表数据
      type: Array,
      required: true,
    },
    isLoading: { // 是否正在加载列表数据
      type: Boolean,
      required: true,
    },
  },
  data() {
    return {
      noteT: this.$C.notifications.type,
    };
  },
};
</script>

<style></style>
